 import styled from 'styled-components'
 import { thomeColor } from 'assets/color'
import border from 'utils/border';

 export const IndexDetailStyle= styled.div`
      flex:1
      display:flex;
      flex-direction: column;
      
 `
 export const DetailContainerStyle = styled.div`
        flex:1;
        overflow:hidden;
 `

 export const DetailTabBarStyle =border({
    component: styled.div`
    height:.49rem;
    width:100%;
    display:flex;
    `,
    width: '1px',
    style: 'solid',
    color: '#eee',
    radius: 0,
})

export const DetailTabBarLeftStyle = styled.div`
    flex:120;
    height:.49rem;
    display:flex;
    &>a{
        flex:50%;
        height:100%;
        border-right:1px solid #eee;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction: column;
        color: #979797;
        position:relative;
        i{
            font-size:.18rem
        }
        span{
            font-size:.1rem;
            margin-top: .04rem
        }
        .dot{
            position: absolute;
            top:0;
            right:.08rem;
            color:${thomeColor}
        }
    }
`
export const DetailTabBarRightStyle = styled.div`
    flex:255;
    height:.49rem;
    display:flex;
    font-size:.14rem;
    span{
        flex:50%;
        height:100%;
        border-right:1px solid #eee;
        background: linear-gradient(210deg, #ffcfdf 0%, #fff1f6 98%);
        color:${thomeColor};
        text-align:center;
        line-height:.49rem;
    }
    &>div{
        flex:50%;
        height:100%;
        background: linear-gradient(142deg, #ff5593 0%, #fe4070 100%);
        color: #fff;
        text-align:center;
        line-height:.49rem;

    }

`
 
 
 
 
 


 export const DetailPriceStyle = styled.article`
     height:.57rem;
     padding:.15rem .12rem 0 .12rem;
     
 `

 export const DetailPriceInfoStyle = styled.div`
     overflow: hidden;
     width: 100%;
     color: ${ thomeColor };
     height: .28rem;
     display:flex;
     justify-content:center;
     align-items:center;
     justify-content:space-between;
     .price{
          font-size:.28rem
     }
     s{
          color:#666;
          font-size:.13rem;
          margin-left:.06rem
     }
     strong{
          color: #666;
          font-size: .13rem;
     }
 `
 export const DetailPriceTimeStyle = styled.div`
     color: #666;
     font-size: .13rem;
     margin-top:.15rem
 `

 export const DetailTitleStyle　= styled.div`
     height:.23rem;
     padding: .12rem .12rem .1rem .12rem;
     color:#333;
     font-size:.14rem;
 `
 export const DetailsImgStyle =styled.div`
    width:100%;
    img{
        width:100%;
    }
`

export const DetailsNav = styled.div`
    background-color: #fff; 
    font-size: .14rem;
    margin-bottom:.04rem;
    .tab-box {
        width: 100%;
        height: .44rem;
        .tuwen-tab {
            width: 100%;
            height: .44rem;
            color: #666;
            font-size: 13px;
            box-sizing: border-box;
            top: 0;
            z-index: 19;
            border-bottom: .01rem solid #eee;
            .cur {
                color: #fe4070;
                .pa {
                    display: inline-block;
                    bottom: 0;
                    left: 26%;
                    width: .6rem;
                    height: .02rem;
                    border-radius: .01rem .01rem 0 0;
                    background-color: #fe4070;
                    position: absolute;
                }
            }
            li {
                -webkit-tap-highlight-color: rgba(255,255,255,0);
                display: inline-block;
                width: 32%;
                line-height: .44rem;
                text-align:center;
                position:relative;
            }
        }
    }
`

export const DetailCountContainerStyle = styled.div`
        display:flex;
        justify-content:center;
        align-items:center;
        padding:.25rem;
        color:#999;
        button{
            border-radius:50%;
            background: #fff;
            border:1px solid #eee;
            width:.3rem;
            height:.3rem
            margin:0 .1rem
            i{
                color:${thomeColor}
            }
        }
        input{

        }
`